<template>
  <!-- 面板卡片 -->
  <view class="pane-card" @tap="handleNext">
    <view class="pane-header" v-if="$slots.header">
      <slot name="header"></slot>
    </view>
    <view class="pane-wrapper">
      <template v-if="$slots.icon">
        <view class="pane-wrapper">
          <view class="icon">
            <slot name="icon"></slot>
          </view>
          <view class="content">
            <view class="pane-main">
              <slot name="title">
                <text class="title" v-if="title">{{ title }}</text>
                <view :class="{ tag: true, error: tagError }" v-if="tag">
                  <text>{{ tag }}</text>
                </view>
              </slot>
            </view>
            <view class="sub-title">
              <slot name="subtitle">
                <text>{{ subTitle }}</text>
              </slot>
            </view>
          </view>
        </view>
      </template>
      <template v-else>
        <view class="content">
          <view class="pane-main">
            <slot name="title">
              <text class="title">{{ title }}</text>
              <view :class="{ tag: true, error: tagError }" v-if="tag">
                <text>{{ tag }}</text>
              </view>
            </slot>
          </view>
          <view class="sub-title">
            <slot name="subtitle">
              <text>{{ subTitle }}</text>
            </slot>
          </view>
        </view>
      </template>
      <view class="right">
        <slot name="right">
          <view class="pane-next" v-if="next">
            <view class="badge" v-if="badge"></view>
            <m-icon color="#666666" type="arrowright"></m-icon>
          </view>
        </slot>
      </view>
    </view>
  </view>
</template>
<script>
import MIcon from '@/components/m-icon/m-icon.vue';
export default {
  components: {
    MIcon
  },
  props: {
    id: [String, Number],
    title: String,
    icon: String,
    subTitle: String,
    tag: String,
    tagError: Boolean,
    badge: Boolean,
    next: [String, Boolean]
  },
  methods: {
    handleNext() {
      this.$emit('onNext', this.id);
      if (this.next && typeof this.next === 'string') {
        uni.navigateTo({
          url: this.next
        });
      }
    }
  }
};
</script>
<style lang="scss">
.pane {
  &-card {
    padding: 0rpx 40rpx 0rpx 40rpx;
    margin-bottom: 32rpx;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 24rpx;
    box-shadow: 0px 0px 30rpx rgb(41 132 248 / 10%);
  }

  &-header {
    padding: 20rpx 0 12rpx 0;
    width: 100%;
    display: block;
    border-bottom: 1rpx solid rgba($color: $uni-text-color-disable, $alpha: 0.4);
  }

  &-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .icon {
      margin-right: 36rpx;
    }

    .content {
      padding: 24rpx 0 30rpx 0;
      line-height: 2;
      flex: 1;
    }

    .right {
      display: flex;
      align-items: center;
    }

    .title {
      font-size: 36rpx;
    }

    .sub-title {
      font-size: 28rpx;
      color: $uni-sub-text-color;
    }

    .tag {
      margin-left: 20rpx;
      padding: 0rpx 28rpx;
      display: inline-block;
      background-color: rgba($color: $uni-color-success, $alpha: 0.2);
      border-radius: 12rpx;
      line-height: 1.5;
      font-size: 28rpx;

      text {
        color: $uni-color-success;
      }

      &.error {
        background-color: rgba($color: $uni-color-error, $alpha: 0.2);

        text {
          color: $uni-color-error;
        }
      }
    }
  }

  &-next {
    display: flex;
    align-items: center;

    .badge {
      margin-right: 4rpx;
      width: 12rpx;
      height: 12rpx;
      border-radius: 50%;
      background-color: $uni-color-error;
    }
  }
}
</style>
